<template>
  <view class="course-detail-page">
    <!-- 视频缩略图区域 -->
    <view class="video-thumbnail-section">
      <image class="instructor-image" src="http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg" alt="instructor" />

      <view class="play-button" @click="playVideo">
        <view class="iconfont-v2 icon-bofang play-icon"></view>
      </view>
    </view>

    <!-- 课程概览 -->
    <view class="course-overview">
      <text class="course-title">一对一专属欧美外教v2.0</text>
      <view class="course-stats">
        <view class="stat-item">
          <text class="iconfont-v2 icon-xueyuan stat-icon"></text>
          <text class="stat-value">200</text>
        </view>
        <view class="stat-item">
          <text class="iconfont-v2 icon-zan1 stat-icon"></text>
          <text class="stat-value">500</text>
        </view>
        <view class="stat-item ttime">
          <text class="iconfont-v2 icon-shijian stat-icon"></text>
          <text class="stat-value">1小时45分钟</text>
        </view>
      </view>
    </view>

    <!-- 导航标签 -->
    <view class="nav-tabs">
      <view class="tab-item" v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }" @click="switchTab(index)">
        <text>{{ tab }}</text>
      </view>
    </view>

    <!-- 课程内容 -->
    <view class="course-content">
      <!-- 课程列表 -->
      <view v-if="currentTab === 0" class="course-list">
        <view class="course-module" v-for="(module, index) in courseModules" :key="index" @click="playModule(module)">
          <view class="module-number">{{ String(index + 1).padStart(2, "0") }}</view>
          <view class="module-info">
            <text class="module-title">{{ module.title }}</text>
            <view class="module-stats">
              <view class="stat">
                <text class="iconfont-v2 icon-yanjing stat-icon"></text>
                <text class="stat-text">{{ module.views }}</text>
              </view>
              <view class="stat">
                <text class="iconfont-v2 icon-shijian stat-icon"></text>
                <text class="stat-text">{{ module.duration }}</text>
              </view>
            </view>
          </view>
          <view class="module-play">
            <text class="iconfont-v2 icon-bofang play-icon"></text>
          </view>
        </view>
      </view>

      <!-- 课程简介 -->
      <view v-if="currentTab === 1" class="course-intro">
        <text class="intro-title">课程简介</text>
        <text class="intro-content">
          本课程是一对一专属欧美外教课程，采用全新的教学方式，让学员在轻松愉快的氛围中学习英语。
          课程内容包括：
          1. 基础语法学习
          2. 口语表达训练
          3. 听力理解提升
          4. 写作技巧指导
          5. 文化背景了解
        </text>
      </view>

      <!-- 全部评论 -->
      <view v-if="currentTab === 2" class="reviews-section">
        <view class="review-item" v-for="review in reviews" :key="review.id">
          <image class="reviewer-avatar" :src="review.avatar" :alt="review.name" />
          <view class="review-content">
            <view class="reviewer-info">
              <text class="reviewer-name">{{ review.name }}</text>
              <view class="rating-stars">
                <text class="iconfont-v2 icon-star" v-for="star in review.rating" :key="star"></text>
              </view>
            </view>
            <text class="review-text">{{ review.content }}</text>
            <text class="review-time">{{ review.time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="action-btn collect-btn" @click="toggleCollect">
        <text class="iconfont-v2 icon-shoucang action-icon" :class="{ collected: isCollected }"></text>
        <text class="action-text">{{ isCollected ? '已收藏' : '收藏' }}</text>
      </view>
      <view class="action-btn share-btn" @click="shareCourse">
        <text class="iconfont-v2 icon-fenxiang action-icon"></text>
        <text class="action-text">分享</text>
      </view>
      <button class="enroll-btn" @click="enrollCourse">
        <text>立即报名</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      isCollected: false,
      
      // 导航标签
      tabs: ["课程列表", "课程简介", "全部评论"],
      
      // 课程模块
      courseModules: [
        {
          id: 1,
          title: "第1-4周:基础绘画技能学习与练习",
          views: 200,
          duration: "40分钟",
        },
        {
          id: 2,
          title: "第5-8周:观察与写生练习",
          views: 200,
          duration: "2小时0分钟",
        },
        {
          id: 3,
          title: "第9-12周:创意绘画实践与指导",
          views: 200,
          duration: "1小时30分钟",
        },
        {
          id: 4,
          title: "第13-16周:美术欣赏与总结展示",
          views: 200,
          duration: "1小时0分钟",
        },
      ],
      
      // 评论数据
      reviews: [
        {
          id: 1,
          name: "学员小王",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          rating: 5,
          content: "老师很专业，课程内容很丰富，学到了很多绘画技巧！",
          time: "2024-01-15",
        },
        {
          id: 2,
          name: "学员小李",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          rating: 4,
          content: "课程安排合理，老师讲解详细，推荐！",
          time: "2024-01-14",
        },
        {
          id: 3,
          name: "学员小张",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
          rating: 5,
          content: "非常棒的课程，老师很有耐心，学到了很多！",
          time: "2024-01-13",
        },
      ]
    }
  },
  methods: {
    playVideo() {
      console.log("播放视频");
      uni.showToast({
        title: "开始播放视频",
        icon: 'none'
      });
    },
    switchTab(index) {
      this.currentTab = index;
    },
    playModule(module) {
      console.log("播放模块:", module);
      uni.showToast({
        title: `播放: ${module.title}`,
        icon: 'none'
      });
    },
    toggleCollect() {
      this.isCollected = !this.isCollected;
      uni.showToast({
        title: this.isCollected ? "收藏成功" : "取消收藏",
        icon: 'success'
      });
    },
    shareCourse() {
      console.log("分享课程");
      uni.showToast({
        title: "分享课程",
        icon: 'none'
      });
    },
    enrollCourse() {
      console.log("报名课程");
      uni.navigateTo({
        url: '/pages/fast/payment'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.course-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.video-thumbnail-section {
  position: relative;
  width: 100%;
  height: 400rpx;
  background: #000;

  .instructor-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120rpx;
    height: 120rpx;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(0, 0, 0, 0.8);
      transform: translate(-50%, -50%) scale(1.1);
    }

    .play-icon {
      font-size: 48rpx;
      color: white;
      margin-left: 8rpx;
    }
  }
}

.course-overview {
  background: white;
  padding: 40rpx;
  margin-bottom: 20rpx;

  .course-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
    line-height: 1.4;
  }

  .course-stats {
    display: flex;
    gap: 40rpx;

    .stat-item {
      display: flex;
      align-items: center;
      gap: 12rpx;

      .stat-icon {
        font-size: 28rpx;
        color: #666;
      }

      .stat-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }

      &.ttime .stat-value {
        color: #ED6567;
      }
    }
  }
}

.nav-tabs {
  background: white;
  display: flex;
  border-bottom: 2rpx solid #f0f0f0;

  .tab-item {
    flex: 1;
    padding: 30rpx 20rpx;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    &.active {
      color: #ED6567;
      font-weight: 600;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: #ED6567;
        border-radius: 2rpx;
      }
    }
  }
}

.course-content {
  background: white;
  min-height: 600rpx;

  .course-list {
    padding: 20rpx;

    .course-module {
      display: flex;
      align-items: center;
      padding: 30rpx 20rpx;
      border-bottom: 2rpx solid #f0f0f0;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #f8f9fa;
      }

      .module-number {
        width: 60rpx;
        height: 60rpx;
        background: #ED6567;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        font-weight: 600;
        margin-right: 24rpx;
      }

      .module-info {
        flex: 1;

        .module-title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 12rpx;
          display: block;
          line-height: 1.4;
        }

        .module-stats {
          display: flex;
          gap: 24rpx;

          .stat {
            display: flex;
            align-items: center;
            gap: 8rpx;

            .stat-icon {
              font-size: 24rpx;
              color: #999;
            }

            .stat-text {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
      }

      .module-play {
        .play-icon {
          font-size: 32rpx;
          color: #ED6567;
        }
      }
    }
  }

  .course-intro {
    padding: 40rpx;

    .intro-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 24rpx;
      display: block;
    }

    .intro-content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      display: block;
    }
  }

  .reviews-section {
    padding: 20rpx;

    .review-item {
      display: flex;
      padding: 30rpx 20rpx;
      border-bottom: 2rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .reviewer-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 24rpx;
      }

      .review-content {
        flex: 1;

        .reviewer-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 12rpx;

          .reviewer-name {
            font-size: 28rpx;
            color: #333;
            font-weight: 500;
          }

          .rating-stars {
            display: flex;
            gap: 4rpx;

            .icon-star {
              font-size: 24rpx;
              color: #FFD700;
            }
          }
        }

        .review-text {
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
          margin-bottom: 12rpx;
          display: block;
        }

        .review-time {
          font-size: 24rpx;
          color: #999;
          display: block;
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 20rpx 40rpx;
  border-top: 2rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 20rpx;

  .action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8rpx;
    cursor: pointer;
    transition: all 0.3s ease;

    .action-icon {
      font-size: 32rpx;
      color: #666;
      transition: all 0.3s ease;

      &.collected {
        color: #ED6567;
      }
    }

    .action-text {
      font-size: 24rpx;
      color: #666;
    }

    &:hover .action-icon {
      color: #ED6567;
    }
  }

  .enroll-btn {
    flex: 1;
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    padding: 24rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #d55a54;
    }

    text {
      color: white;
    }
  }
}
</style>